{% extends "ext_base.html" %}

{% load i18n %}
{% load staticfiles %}
{% load pagination_tags %}
{% load crispy_forms_tags %}

{% block extjs_center_area %}
    <div class="well well-sm" style="padding:4px;">
        <select id="selected_year" style="width:200px;">
        {% for year in years %}
            <option value="{{ year }}">{{ year }}{% trans "year" %}</option>
        {% endfor %}
        </select>
    </div>
    <div id="display_area"></div>
{% endblock %}

{% block jsblock %}
    <script type="text/javascript">
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);

        Ext.onReady(function(){
            Ext.getCmp('center-panel').child('#hr').setTitle('{{title}}');
            Ext.getCmp('west-panel').child('#menu_employee').expand();

            var year = $("#selected_year option:selected").val();
            var url = '{% url json_ext_employee_worked_manufactureitem 999 %}'.replace (999, year);

            var Grid1Store = new Ext.data.JsonStore({
                pageSize: 20,
                fields: [ '0', '1', '2', '3', '4','5','6','7','8','9','10','11','12' ],
                //autoLoad: true,
                sorters: [{
                    property : 'i',
                    direction:'ASC'
                }],
                proxy:{
                    type:'ajax',
                    url:url,
                    reader:{
                        root:'data',
                        totalProperty: 'totalCount'
                    }
                }
            });

            var grid = Ext.create('Ext.grid.Panel', {
                renderTo : 'display_area', 
                title: '{{title}}',
                store: Grid1Store,
                columns: [
                    {text: "{% trans "employee" %}", flex: 1, dataIndex: '0', sortable: true},
                    {text: "1{% trans "month" %}", flex: 1, dataIndex: '1', sortable: true},
                    {text: "2{% trans "month" %}", flex: 1, dataIndex: '2', sortable: true},
                    {text: "3{% trans "month" %}", flex: 1, dataIndex: '3', sortable: true},
                    {text: "4{% trans "month" %}", flex: 1, dataIndex: '4', sortable: true},
                    {text: "5{% trans "month" %}", flex: 1, dataIndex: '5', sortable: true},
                    {text: "6{% trans "month" %}", flex: 1, dataIndex: '6', sortable: true},
                    {text: "7{% trans "month" %}", flex: 1, dataIndex: '7', sortable: true},
                    {text: "8{% trans "month" %}", flex: 1, dataIndex: '8', sortable: true},
                    {text: "9{% trans "month" %}", flex: 1, dataIndex: '9', sortable: true},
                    {text: "10{% trans "month" %}", flex: 1, dataIndex: '10', sortable: true},
                    {text: "11{% trans "month" %}", flex: 1, dataIndex: '11', sortable: true},
                    {text: "12{% trans "month" %}", flex: 1, dataIndex: '12', sortable: true},
                ],
                //forceFit: true,

                bbar: Ext.create('Ext.PagingToolbar', {
                    store: Grid1Store,
                    displayInfo: true,
                    displayMsg: '{0} - {1} of {2}',
                    emptyMsg: "No topics to display"
                }),
                region: 'north'
            });
            Grid1Store.loadPage(1);

            $("#selected_year").change(function() {
                var year = $("#selected_year option:selected").val();
                var url = '{% url json_ext_employee_worked_manufactureitem 999 %}'.replace (999, year);
                grid.getStore().getProxy().url = url;
                grid.getStore().reload();
            }).change();


                var year2 = $("#selected_year option:selected").val();
                var url = '{% url json_ext_employee_worked_manufactureitem 999 %}?func=2'.replace (999, year2);
                var store6 = new Ext.data.JsonStore({
                    fields: ['0', '1', '2', '3', '4','5','6','7','8','9','10','11','12'],
                    autoLoad: true,
                    proxy:{
                        type:'ajax',
                        url:url,
                        reader:{
                            root:''
                        }
                    }
                });

                var stackbar_chart = Ext.create('Ext.chart.Chart',{
                    animate: true,
                    shadow: true,
                    store: store6,
                    legend: {
                        position: 'right',
                    },
                    axes: [{
                        type: 'Numeric',
                        position: 'bottom',
                        fields: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        title: '{% trans "qty" %}',
                        grid: true,
                        label: {
                            renderer: Ext.util.Format.numberRenderer('0,0')
                        }
                    }, {
                        type: 'Category',
                        position: 'left',
                        fields: ['0'],
                        title: '{% trans "employee" %}'
                    }],
                    series: [{
                        type: 'bar',
                        axis: 'bottom',
                        gutter: 80,
                        xField: '0',
                        yField: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        title: ['1{% trans "month" %}', '2{% trans "month" %}', '3{% trans "month" %}', '4{% trans "month" %}', '5{% trans "month" %}', '6{% trans "month" %}', '7{% trans "month" %}', '8{% trans "month" %}', '9{% trans "month" %}', '10{% trans "month" %}', '11{% trans "month" %}', '12{% trans "month" %}'],
                        stacked: true,
                        tips: {
                            trackMouse: true,
                            width: 180,
                            height: 28,
                            renderer: function(storeItem, item) {
                                this.setTitle(storeItem.get('0') + ': ' + String(item.value[1]));
                            }
                        }
                    }]
                });

                var panel_payment_total = Ext.create('widget.panel', {
                    width: 800,
                    height: 600,
                    title: '{{ title }}图',
                    layout: 'fit',
                    items: stackbar_chart
                });
                Ext.getCmp('center-panel').insert(0, panel_payment_total);



        });

    </script>
{% endblock %}
